<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">

    <input v-model="data"/>
    <p></p>
    <button @click="send()">发送</button>
</div>

<script>

    let app = new Vue({
        el: "#app",
        data: {
            data: "",
            connect:null
        },
        methods: {

            open(evt) {

                console.log('open');
            },

            close(evt){

                console.log('close');
            },
            message(evt){

                console.log(evt);
            },
            error(evt, e){

            },
            getConnect(){

                let url = 'ws://192.168.70.128:9500';

                let websocket = new WebSocket(url);

                websocket.onopen = this.open;

                websocket.onclose=this.close;

                websocket.onmessage=this.message;

                websocket.onerror=this.error;

                this.connect=websocket;
            },
            send(){

                this.connect.send(this.data);
            }



        },
        created() {

            this.getConnect();

        }
    });


</script>
</body>
</html>
